<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Col, Row } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import StatisticCard from '#/components/hotel/StatisticsCard.vue';
import AvailabilityQuery from './components/AvailabilityQuery.vue';
import ConflictDetection from './components/ConflictDetection.vue';
import InventoryAlerts from './components/InventoryAlerts.vue';
import InventoryMovement from './components/InventoryMovement.vue';
import InventoryStatus from './components/InventoryStatus.vue';
import QuickActions from './components/QuickActions.vue';
import SchedulingCalendar from './components/SchedulingCalendar.vue';

const overview = ref({
  todaySchedules: 0,
  availableResources: 0,
  conflicts: 0,
  lowStockCount: 0,
});

const loadOverview = async () => {
  try {
    // 模拟数据
    overview.value = {
      todaySchedules: 89,
      availableResources: 156,
      conflicts: 3,
      lowStockCount: 8,
    };
  } catch (error) {
    console.warn('加载概览数据失败:', error);
  }
};

onMounted(() => {
  loadOverview();
});
</script>

<template>
  <Page title="调度与库存管理">
    <div class="scheduling-management">
      <Row :gutter="16">
        <Col :span="6">
          <StatisticCard
            title="今日排期"
            :value="overview.todaySchedules"
            icon="mdi:calendar"
            color="#1890ff"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="可用资源"
            :value="overview.availableResources"
            icon="mdi:check-circle"
            color="#52c41a"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="冲突数量"
            :value="overview.conflicts"
            icon="mdi:alert-triangle"
            color="#ff4d4f"
          />
        </Col>
        <Col :span="6">
          <StatisticCard
            title="库存不足"
            :value="overview.lowStockCount"
            icon="mdi:package-variant"
            color="#faad14"
          />
        </Col>
      </Row>

      <div class="scheduling-content">
        <Row :gutter="16">
          <Col :span="16">
            <SchedulingCalendar />
          </Col>
          <Col :span="8">
            <QuickActions />
          </Col>
        </Row>
      </div>

      <div class="inventory-section">
        <Row :gutter="16">
          <Col :span="8">
            <InventoryStatus />
          </Col>
          <Col :span="8">
            <InventoryMovement />
          </Col>
          <Col :span="8">
            <InventoryAlerts />
          </Col>
        </Row>
      </div>

      <div class="conflict-section">
        <Row :gutter="16">
          <Col :span="12">
            <ConflictDetection />
          </Col>
          <Col :span="12">
            <AvailabilityQuery />
          </Col>
        </Row>
      </div>
    </div>
  </Page>
</template>

<style scoped>
.scheduling-management {
  padding: 20px;
}

.scheduling-content {
  margin: 24px 0;
}

.inventory-section {
  margin: 24px 0;
}

.conflict-section {
  margin: 24px 0;
}
</style>
